<template>
  <div class="product-detail h-100P">
    <el-tabs class="h-100P flex-column" v-model="activeName" type="border-card">
      <el-tab-pane class="h-100P" label="基本信息" name="brief" lazy>
        <Brief :value="device" @change="handleChange" v-loading="loading"/>
      </el-tab-pane>
      <el-tab-pane class="h-100P" label="设备功能" name="function" lazy>
        <Function :device="device"/>
      </el-tab-pane>
      <el-tab-pane class="h-100P" label="位置信息" name="location" lazy>
        <DeviceLocation :device="device">
          <el-amap-ground-image url="@/assets/img/copy.png"></el-amap-ground-image>
        </DeviceLocation>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Brief from './components/brief'
import Function from './components/function'
import { apiFindDeviceById } from '@/views/device/deploy-device/api'
import DeviceLocation from './components/device-location'

export default {
  name: 'DeviceDetail',
  components: { Brief, Function, DeviceLocation },
  data() {
    return {
      loading: false,
      activeName: 'brief',
      device: {
        id: '', // 产品id
        name: '', // 产品名称
        onlineStateName: '',
        remarkName: '', // 产品备注名
        metadataId: '', // 物模型Id
        devices: '', // 接入设备数
        netType: '', // 入网方式
        publishState: '', // 产品发布状态
        remark: '', // 备注说明
        productId: '', // 产品id,
        productVo: {} // 产品详情
      }
    }
  },
  computed: {},
  mounted() {
    const { deviceId } = this.$route.query
    this.device.id = deviceId
    this.initPage()
  },
  methods: {
    async initPage() {
      await this.findDeviceById(this.device.id)
    },
    handleChange() {
      this.initPage()
    },
    async findDeviceById(deviceId) {
      this.loading = true
      this.device = await apiFindDeviceById(deviceId)
      this.loading = false
    }
  }

}
</script>

<style scoped lang="scss">
.product-detail {
  ::v-deep .el-tabs--border-card {
    background: #f3f4f8;
    border: none;
    box-shadow: none;
  }

  ::v-deep .el-tabs__header {
    width: fit-content;
    border: none;
  }

  ::v-deep .el-tabs__item {
    padding: 0 50px !important;
    color: #666;
    background-color: #DADCE8;
    border: none;
    border-radius: 4px 4px 0 1px;

    &:not(:last-child) {
      margin-right: 8px;
    }

    &:not(.is-disabled):hover {
      color: #666;
    }
  }

  ::v-deep .el-tabs__item.is-active {
    color: #D12D1F;
    background-color: #fff;

    &:hover {
      color: #D12D1F;
    }
  }

  ::v-deep .el-tabs__content {
    background: #FFF;
    height: 100%;
  }
}
</style>
